<template>
  <div class="home_index">
    <p class="title">家庭管理签约系统</p>
    <div class="top2 cc" @click="to_JianDang(1)" v-if="isShowNow == 1">
      <span class="val_c">
        <i class="iconfont icon_">&#xe657;</i>
      </span>
      <span class="val_e"> 暂无家庭记录，请先添加 </span>
    </div>
    <div class="top2 cc" @click="to_JianDang(2)" v-if="isShowNow == 2">
      <span class="val_c">
        <i class="iconfont icon_">&#xe629;</i>
      </span>
      <span class="val_e"> 请选择当前人员 </span>
    </div>
    <div class="top3 cc" style="text-align: left" v-if="isShowNow == 3">
      <span class="val_c">
        <img
          src="https://img1.baidu.com/it/u=3338386877,2096979077&fm=253&fmt=auto&app=138&f=JPEG?w=294&h=294"
          class="photo_"
          alt=""
        />
      </span>
      <span
        class="val_e"
        style="display: inline-block; vertical-align: middle; text-align: left"
      >
        <span style="display: block; margin-bottom: 0px"
          >张三三 |
          <span
            style="font-size: 12px; display: inline-block; margin-left: 5px"
          >
            4112210021586115</span
          >
        </span>
        <el-button type="primary" size="mini" @click="to_JianDang(2)"
          >切换</el-button
        >
      </span>
      <span class="val_d" @click="to_dzjkk">
        <img
          style="
            border-radius: 0;
            width: 50px;
            height: 50px;
            vertical-align: middle;
          "
          :src="'https://api.qrserver.com/v1/create-qr-code?data=4112210021586115'"
        />
      </span>
    </div>
    <p style="padding: 10px 0"></p>
    <el-tabs type="border-card">
      <el-tab-pane label="个人档案" class="box_style">
        <ul class="munt_w">
          <li class="munt_" @click="todo_('个人档案')">
            <i
              class="iconfont icon_Munt"
              style="background-color: rgb(120, 198, 234)"
              >&#xe6db;</i
            >
            <p>个人档案</p>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="健康体检" class="box_style">
        <ul class="munt_w">
          <li class="munt_" @click="todo_('健康体检')">
            <i
              class="iconfont icon_Munt"
              style="background-color: rgb(120, 198, 234)"
              >&#xe6db;</i
            >
            <p>健康体检</p>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
    <p class="foot">该服务由 北京大洋天空软件有限公司 提供</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowNow: 1,
    };
  },
  mounted() {},
  methods: {
    to_JianDang(val) {
      if (val == 1) {
        this.$router.push("/carte_da");
      }
      if (val == 2) {
        this.$router.push("/user/list");
      }
    },
    todo_(val) {
      if (val == "个人档案") {
        this.$router.push("/carte_da");
      } else {
        this.$alert("当前模块暂未开放~", "提示", {
          confirmButtonText: "确定",
          callback: () => {},
        });
      }
    },
  },
};
</script>

<style scoped lang='scss'>
.home_index {
  padding: 25px;
  background: linear-gradient(180deg, #c6d9f7, #e5ecf7, #fff, #fff, #fff, #fff);
  height: 90vh;
  overflow: hidden;
  .title {
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 50px;
  }

  .top {
    width: 40%;
    height: 160px;
    border-radius: 25px;
    padding: 5% 4%;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);

    .val_c {
      display: block;
      color: #fff;
      font-size: 36px;
      font-weight: 700;
    }

    .val_e {
      display: block;
      margin-top: 20px;
      color: #fff;
      font-size: 28px;

      .icon_ {
        font-size: 88px;
        float: right;
      }
    }
  }

  .top2 {
    width: 90%;
    margin: 0 auto;
    height: 160px;
    border-radius: 25px;
    padding: 5% 4%;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);

    .val_c {
      .icon_ {
        font-size: 60px;
        color: blue;
      }
    }

    .val_e {
      display: block;
      text-align: center;
      margin-top: 20px;
    }
  }

  .top3 {
    width: 90%;
    margin: 0 auto;
    height: 130px;
    border-radius: 25px;
    padding: 5% 4%;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);

    .val_c {
      display: inline-block;
      width: 20%;
    }

    .val_e {
      display: inline-block;
      width: 60%;
      text-align: center;
      margin-top: 20px;
      overflow: hidden;
    }

    .val_d {
      display: inline-block;
      width: 20%;
      text-align: center;
      margin-top: 20px;
    }
  }

  .aa {
    background-color: #35bece;
  }

  .bb {
    background-color: #4395ed;
  }

  .cc {
    background-color: #dce8fb;
  }

  .tab_ {
    height: 400px;
  }

  .munt_w {
    margin: 0 auto;
    text-align: left;
  }

  .munt_ {
    display: inline-block;
    width: 33%;
    text-align: center;
    margin-top: 20px;
  }

  .icon_Munt {
    width: 100px;
    height: 100px;
    text-align: center;
    margin: 0 auto;
    line-height: 100px;
    font-size: 48px;
    border-radius: 50%;
    padding: 5px;
    color: #fff;
  }

  .color_1 {
    background-color: rgb(255, 214, 29);
    color: #fff;
  }

  .photo_ {
    display: inline-block;
    width: 50px;
    height: 50px;
    // background-color: #23195d;
    border-radius: 50%;
    margin-right: 20px;
    vertical-align: middle;
  }
  .box_style {
    height: 380px;
  }
  .foot {
    font-size: 10px;
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: 20px;
  }
}

::v-deep .van-tabs__line {
  height: 100%;
  padding: 50px 70px;
  background: #accbfa;
  border-radius: 0 0 100% 100%;
  z-index: 0;
}

::v-deep .van-tabs {
  border: 1px solid #ccc;
  border-radius: 30px;
}
</style>